<template>
  <el-container class="bgc">
    <el-container class="bgcWhite">
      <div class="headStyle">
        <span style="font-size: 10px">会员卡新增</span>
        <el-button size="small" @click="routerJump">返回</el-button>
      </div>
      <div class="mainBox">
        <el-form :model="form" label-width="120px">
          <el-form-item label="会员卡名称">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="会员卡类型">
            <el-select v-model="form.region" placeholder="请选择类型">
              <el-option label="次卡类型" value="shanghai" />
              <el-option label="期限类型" value="beijing" />
              <el-option label="储值类型" value="beijing" />
            </el-select>
          </el-form-item>

          <el-form-item label="支持场馆">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="健身仓山管" name="type" />
              <el-checkbox label="健身馆" name="type" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="每名最多购买">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="每日可约次数">
            <el-input v-model="form.name" />
          </el-form-item>

          <el-form-item label="在线购买">
            <el-radio-group v-model="form.resource">
              <el-radio label="支持" />
              <el-radio label="不支持" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.desc" type="textarea" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import router from "../../router";
// do not use same name with ref
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
const radio1 = ref(1);
const onSubmit = () => {
  console.log("submit!");
  router.push("/mainView/MembershipCard/shipcardTwoBox/shipcardTwoView");
};
const routerJump: any = function () {
  router.push("/mainView/MembershipCard/shipcardTwoBox/shipcardTwoView");
};
const cancel: any = () => {
  router.push("/mainView/MembershipCard/shipcardTwoBox/shipcardTwoView");
};
</script>

<style scoped>
.bgc {
  width: 100%;
  padding: 20px;
}
.bgcWhite {
  width: 100%;
  background-color: #fff;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.headStyle {
  width: 100%;
  height: 40px;
  background-color: #f3f3f3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.mainBox {
  width: 50%;
  margin-top: 20px;
}
</style>
